<!--
 * @Descripttion: 清洗数据Drawer
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-27 21:56:26
 * @LastEditors: 淏
 * @LastEditTime: 2024-05-01 14:28:05
-->
<template>
  <div>
    <el-drawer :visible.sync="drawer" size="55%" :with-header="false">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i style="color: #00ffff" class="el-icon-s-order"></i>
            <span style="color: #00ffff">待清洗数据</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <virtuallyTable
          :tableData="tableData"
          :columns="columns"
          :tableHeight="tableHeight"
        ></virtuallyTable>
      </div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i style="color: #00ffff" class="el-icon-edit"></i>
            <span style="color: #00ffff">清洗条件</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-card class="cleatCard">
        <el-form
          v-model="rules"
          ref="cleanForm"
          label-width="80px"
          class="demo-dynamic"
        >
          <!-- 循环渲染清洗列 -->
          <div v-for="(cleanItem, cleanIndex) in rules" :key="cleanIndex">
            <el-row>
              <div>
                <el-form-item label-width="40px">
                  <span slot="label">
                    <span class="text">列名</span>
                  </span>
                  <el-select
                    size="mini"
                    v-model="cleanItem.columnEnName"
                    placeholder="选择列"
                    class="handle-select mr10"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="(item, index) in columns"
                      :key="index"
                      :label="item.columnCnName"
                      :value="item.columnEnName"
                    ></el-option>
                  </el-select>
                  <el-tooltip class="item" content="添加列" placement="top-end">
                    <el-button
                      size="mini"
                      class="button"
                      style="margin-left: 20px"
                      type="success"
                      icon="el-icon-circle-plus-outline"
                      circle
                      plain
                      @click="addColumn()"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除该列" placement="top-start">
                    <el-button
                      size="mini"
                      style="margin-left: 20px"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      plain
                      class="button"
                      @click="removeColumn(cleanItem)"
                    ></el-button>
                  </el-tooltip>
                </el-form-item>
              </div>

              <!-- 循环渲染清洗条件 -->
              <div
                v-for="(rulesItem, rulesIndex) in cleanItem.rules"
                :key="rulesItem.keys"
              >
                <el-row>
                  <el-col :span="0.2">
                    <el-tooltip
                      class="button"
                      content="删除该规则"
                      placement="left-start"
                    >
                      <el-button
                        size="mini"
                        style="margin-left: 10px"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        plain
                        @click="removeRules(rulesItem, cleanIndex)"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="23.8">
                    <selectAllRule
                      @getAllRule="getAllRule($event, cleanIndex, rulesIndex)"
                      :type="ruleType"
                      :columns="columns"
                      ref="selectAllRule"
                      @getValue1="getValue1($event, cleanIndex, rulesIndex)"
                      @getValue2="getValue2($event, cleanIndex, rulesIndex)"
                    ></selectAllRule>
                  </el-col>
                </el-row>
              </div>
              <el-col :span="24">
                <el-tooltip content="添加清洗规则" placement="left-start">
                  <el-button
                    size="mini"
                    class="button"
                    style="margin-left: 10px"
                    type="success"
                    icon="el-icon-circle-plus-outline"
                    plain
                    @click="addRules(cleanIndex)"
                  >
                    添加规则
                  </el-button>
                </el-tooltip>
              </el-col>
              <el-divider></el-divider>
            </el-row>
          </div>
          <el-form-item>
            <el-button
              size="mini"
              class="button"
              type="primary"
              style="width: 100px"
              icon="el-icon-circle-check"
              plain
              @click="submitClear('cleanForm')"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
  import virtuallyTable from '@/components/public/virtuallyTable.vue'
  import selectAllRule from '@/components/select/selectAllRule.vue'
  import { clean_import } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'clearDrawer',
    // 组件参数 接收来自父组件的数据
    props: {
      tableData: {
        type: Array,
        required: true,
      },
      columns: {
        type: Array,
        required: true,
      },
    },
    // 局部注册的组件
    components: { virtuallyTable, selectAllRule },
    // 组件状态值
    data() {
      return {
        drawer: false,
        tableHeight: 200,
        ruleType: 'clean',
        rules: [
          {
            columnEnName: '',
            rules: [
              {
                name: '',
                value1: '',
                value2: '',
                keys: new Date().getTime(),
              },
            ],
          },
        ],
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      submitClear() {
        let rows = JSON.stringify(this.tableData)
        let rules = JSON.stringify(this.rules)
        var qs = require('qs')
        var data = qs.stringify({
          rows: rows,
          rules: rules,
        })
        this.$loading.show()
        clean_import(data)
          .then((res) => {
            this.$loading.close()
            this.$message({
              type: 'success',
              message: res.message,
            })
            this.$emit('getCleanTable', res.data)
            this.drawer = false
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
      /* 父组件调用、打开drawer */
      showDrawer(tableData, columns) {
        if (tableData.length != 0 && columns.length != 0) {
          this.tableData = tableData
          this.columns = columns
          this.drawer = true
        }
      },

      //新增列
      addColumn() {
        this.rules.push({
          columnEnName: '',
          rules: [
            {
              name: '',
              value1: '',
              value2: '',
              keys: new Date().getTime(),
            },
          ],
        })
      },
      //删除列
      removeColumn(item) {
        var index = this.rules.indexOf(item)
        if (this.rules.length != 1) {
          if (index !== -1) {
            this.rules.splice(index, 1)
          }
        }
      },
      //新增条件
      addRules(cleanIndex) {
        this.rules[cleanIndex].rules.push({
          name: '',
          value1: '',
          value2: '',
          keys: new Date().getTime(),
        })
      },
      //删除条件
      removeRules(item, cleanIndex) {
        var index = this.rules[cleanIndex].rules.indexOf(item)
        if (this.rules[cleanIndex].rules.length != 1) {
          if (index !== -1) {
            this.rules[cleanIndex].rules = this.rules[cleanIndex].rules.filter(
              (item, num) => num !== index
            )
          }
        }
      },
      getAllRule(row, cleanIndex, rulesIndex) {
        this.rules[cleanIndex].rules[rulesIndex].name = row.name
      },
      getValue1(row, cleanIndex, rulesIndex) {
        this.rules[cleanIndex].rules[rulesIndex].value1 = row.value1
      },
      getValue2(row, cleanIndex, rulesIndex) {
        this.rules[cleanIndex].rules[rulesIndex].value2 = row.value2
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style scoped></style>
<style lang="less" scoped>
  /deep/.el-drawer {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.3);
  }
  .cleatCard {
    background: rgba(48, 89, 224, 0.3);
    border: 1px solid #295a85;
    overflow: auto; /* 自动开启滚动条 */
    max-height: calc(100vh - 280px); /* 设置最大高度 */
  }

  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  /deep/ .el-divider--horizontal {
    margin: 6px;
    margin-top: 40px;
    background: #00ffff82;
  }
  /deep/ .el-tabs--card > .el-tabs__header {
    border-bottom: 1px solid #00ffff99 !important;
  }
  /deep/ .el-tabs__nav {
    border: 1px solid #00ffff99 !important;
  }
  /deep/.el-tabs__item {
    color: #ffffff;
    font-weight: 500;
  }
  /deep/.el-tabs__item.is-active {
    border-bottom-color: #00ffff;
    color: #00ffff;
    font-weight: 500;
  }
</style>
